<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>

    let xhr = new XMLHttpRequest;
    xhr.open('get', 'http://127.0.0.1:8080/list');
    // xhr.withCredentials = true;
    xhr.onreadystatechange = function () {
      if (xhr.status === 200 && xhr.readyState === 4) {
        console.log(xhr.responseText);
      }
    };
    xhr.send();



    /*
    CORS跨域，在服务器端设置允许的源地址，前端不做任何处理，顶多设置一个xhr.withCredentials = true;(允许发送请求的时候携带资源凭证)
    */



    // 下边这一坨是后台配置的代码
    app.use((req, res, next) => {
      // 如果允许所有源，(不安全、不能携带凭证)
      // 单一源，(安全、可以携带凭证，只能是单一源)
      let url = req.headers.origin; // 获取当前请求的域
      console.log(url, 15);
      let ary = ['http://127.0.0.1:5501', 'http://127.0.0.1:5500']; // 设置白名单

      let origin = 'http://127.0.0.1:8080';
      origin = ary.includes(url) ? url : origin; // 看看的当前的域在白名单里有没有，如果有，就赋值给origin，否则还是原来的值
      
      res.header("Access-Control-Allow-Origin", origin);
      res.header("Access-Control-Allow-Credentials", true);
      res.header("Access-Control-Allow-Headers", 'Content-Type,Content-Length,Authorization, Accept,X-Requested-With');
      res.header("Access-Control-Allow-Methods", 'PUT,POST,GET,DELETE,OPTIONS,HEAD');
      // req.method === 'OPTIONS' ? res.send('CURRENT SERVICES SUPPORT CROSS DOMAIN REQUESTS!') : next();
      next();
    });
  </script>
</body>

</html>